<!--
  * 业绩日报表
-->
<template>
  <!---------- 查询表单form begin ----------->
  <a-form class="smart-query-form">
    <a-row class="smart-query-form-row">
      <a-form-item label="" class="smart-query-form-item">
        <a-radio-group v-model:value="queryForm.agentType" option-type="button" button-style="solid" :options="tabs" @change="queryData" />
      </a-form-item>
    </a-row>
    <a-row class="smart-query-form-row">
      <a-form-item label="所属主管" class="smart-query-form-item" v-if="queryForm.agentType == 'exhibition'">
        <CustomSelect
          v-model:value="queryForm.supervisorId"
          :placeholder="'请选择所属主管'"
          :api="exhibitionApi.queryPage"
          :queryParams="{ position: 0 }"
          :style="{ width: '220px' }"
          queryParamKey="name"
          labelField="name,no"
        />
      </a-form-item>
      <a-form-item label="归属月份" class="smart-query-form-item">
        <!-- <a-date-picker
          :allowClear="false"
          :inputReadOnly="true"
          valueFormat="YYYY-MM-DD"
          v-model:value="queryForm.fTime"
          style="width: 120px"
          @change="onChangeTTime"
        /> -->
        <a-range-picker
          :allowClear="false"
          :inputReadOnly="true"
          v-model:value="queryForm.attributionDate"
          style="width: 220px"
          picker="month"
          @change="onChangeTime"
        />
      </a-form-item>
      <a-form-item label="姓名" class="smart-query-form-item" v-if="queryForm.agentType == 'exhibition'">
        <CustomSelect
          v-model:value="queryForm.exhibitionsId"
          :placeholder="'请选择'"
          :style="{ width: '220px' }"
          :queryParams="{ position: 1 }"
          :api="exhibitionApi.queryPage"
          queryParamKey="name"
          labelField="name,no"
        />
      </a-form-item>
      <a-form-item label="姓名" class="smart-query-form-item" v-if="queryForm.agentType == 'supervisor'">
        <a-input style="width: 200px" v-model:value="queryForm.name" placeholder="请输入姓名" />
      </a-form-item>
      <!-- <a-form-item label="支付通道" class="smart-query-form-item">
        <DictSelect style="width: 200px" placeholder="支付通道" v-model:value="queryForm.channelId" code="CHANNEL_BUSINESS_TYPE" />
      </a-form-item> -->
      <a-form-item class="smart-query-form-item">
        <a-button type="primary" @click="onSearch">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button @click="resetQuery" class="smart-margin-left10">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>
  <!---------- 查询表单form end ----------->

  <a-card size="small" :bordered="false" :hoverable="true">
    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <div class="smart-table-title">数据列表</div>
      <div class="smart-table-setting-block">
        <a-button type="primary" @click="exportFun">
          <template #icon> </template>
          导出
        </a-button>
        <!-- <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.OPERATION.MERCHANT_DAY_ORDER" :refresh="queryData" /> -->
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->

    <!---------- 表格 begin ----------->
    <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns[queryForm.agentType]"
      rowKey="id"
      bordered
      :loading="tableLoading"
      :pagination="false"
      :scroll="{ x: 'max-content' }"
    >
      <template #headerCell="{ title, column }">
        <span v-if="column?.tip">
          {{ title }}
          <a-tooltip :title="column?.tip">
            <QuestionCircleOutlined />
          </a-tooltip>
        </span>
      </template>
      <!-- <template #bodyCell="{ text, column }">
      </template> -->
    </a-table>
    <!---------- 表格 end ----------->

    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.pageSize"
        v-model:current="queryForm.pageNo"
        v-model:pageSize="queryForm.pageSize"
        :total="total"
        @change="queryData"
        @showSizeChange="queryData"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </a-card>
</template>
<script setup>
  import { reactive, ref, onMounted, getCurrentInstance, computed, h } from 'vue'
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const'
  import { smartSentry } from '/@/lib/smart-sentry'
  import TableOperator from '/@/components/support/table-operator/index.vue'
  import CustomSelect from '/@/components/business/comment/CustomSelect.vue'
  import { exhibitionApi } from '/@/api/business/b-agent/exhibition/exhibition-api'
  import { exhibitionMonthPage, exhibitionMonthExport, supervisorMonthPage, supervisorMonthExport } from '/@/api/business/b-agent/salesman-month-news'
  import { message } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import { formatToMoney, downloadBase64File } from '/@/utils/common'
  const { proxy } = getCurrentInstance()

  const apiObj = {
    list: (data) => {
      if (queryForm.value.agentType == 'exhibition') return exhibitionMonthPage(data)
      if (queryForm.value.agentType == 'supervisor') return supervisorMonthPage(data)
    },
    export: (data) => {
      if (queryForm.value.agentType == 'exhibition') return exhibitionMonthExport(data)
      if (queryForm.value.agentType == 'supervisor') return supervisorMonthExport(data)
    },
  }

  const tabs = [
    {
      label: '业务员月报表',
      value: 'exhibition',
    },
    {
      label: '业务主管月报表',
      value: 'supervisor',
    },
  ]
  // ---------------------------- 表格列 ----------------------------

  const columns = ref({
    exhibition: [
      {
        title: '序号',
        dataIndex: 'index',
        width: 60,
        customRender: ({ index }) => {
          return (queryForm.value.pageNo - 1) * queryForm.value.pageSize + index + 1
        },
      },
      {
        title: '所属主管',
        dataIndex: 'supervisorName',
        ellipsis: true,
      },
      {
        title: '姓名',
        dataIndex: 'exhibitionsName',
        ellipsis: true,
      },
      {
        title: '归属月份',
        dataIndex: 'attributionMonth',
        customRender: (column) => dayjs(column.text).format('YYYY-MM'),
        width: 180,
        ellipsis: true,
      },
      {
        title: '业务商户总数',
        dataIndex: 'allMerchantsCount',
        tip: '有效商户判断：进件审核通过的商户',
        ellipsis: true,
      },
      {
        title: '业务新增商户数',
        dataIndex: 'newMerchantsCount',
        ellipsis: true,
      },
      {
        title: '代理商数',
        dataIndex: 'allAgentCount',
        ellipsis: true,
      },
      {
        title: '新增代理商数',
        dataIndex: 'newAgentCount',
        ellipsis: true,
      },
      {
        title: '业务交易商户',
        dataIndex: 'exhibitionsTradeMerchantCount',
        tip: '交易商户判断：支付成功的交易笔数大于等于1笔的商户',
        width: 100,
        ellipsis: false,
      },
      {
        title: '业务活跃商户',
        dataIndex: 'exhibitionsActiveMerchantCount',
        tip: '活跃商户判断：最近7天日均交易金额≥10元',
        ellipsis: true,
      },
      {
        title: '业务流失商户',
        dataIndex: 'exhibitionsLossMerchantCount',
        tip: '流失商户判断：最近7天日均交易为0',
        width: 100,
        ellipsis: false,
      },
      {
        title: '交易金额',
        dataIndex: 'tradeAmtSum',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '交易笔数',
        dataIndex: 'tradeNumSum',
        ellipsis: true,
      },
      {
        title: '退款金额',
        dataIndex: 'refundAmtSum',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '退款笔数',
        dataIndex: 'refundNumSum',
        ellipsis: true,
      },
      {
        title: '实收金额',
        dataIndex: 'receivedAmtSum',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '代理商商户总数',
        dataIndex: 'agentAllMerchantCount',
        tip: '有效商户判断：进件审核通过的商户',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理商新增商户数',
        dataIndex: 'agentNewMerchantCount',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理交易商户',
        dataIndex: 'agentTradeMerchantCount',
        tip: '交易商户判断：支付成功的交易笔数大于等于1笔的商户',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理活跃商户',
        dataIndex: 'agentActiveMerchantCount',
        tip: '活跃商户判断：最近7天日均交易金额≥10元',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理流失商户',
        dataIndex: 'agentLossMerchantCount',
        tip: '流失商户判断：最近7天日均交易为0',
        width: 100,
        ellipsis: false,
      },
    ],
    supervisor: [
      {
        title: '序号',
        dataIndex: 'index',
        width: 60,
        customRender: ({ index }) => {
          return (queryForm.value.pageNo - 1) * queryForm.value.pageSize + index + 1
        },
      },
      {
        title: '姓名',
        dataIndex: 'supervisorName',
        width: 100,
        ellipsis: true,
      },
      {
        title: '归属月份',
        dataIndex: 'attributionMonth',
        customRender: (column) => dayjs(column.text).format('YYYY-MM'),
        width: 180,
        ellipsis: true,
      },
      {
        title: '主管商户总数',
        dataIndex: 'allMerchantsCount',
        tip: '有效商户判断：进件审核通过的商户',
        width: 100,
        ellipsis: true,
      },
      {
        title: '主管新增商户数',
        dataIndex: 'newMerchantsCount',
        width: 100,
        ellipsis: true,
      },
      {
        title: '代理商数',
        dataIndex: 'allAgentCount',
        width: 100,
        ellipsis: true,
      },
      {
        title: '新增代理商数',
        dataIndex: 'exhibitionNewAgentCount',
        width: 100,
        ellipsis: true,
      },
      {
        title: '主管交易商户',
        dataIndex: 'supervisorTradeMerchantCount',
        tip: '交易商户判断：支付成功的交易笔数大于等于1笔的商户',
        width: 100,
        ellipsis: false,
      },
      {
        title: '主管活跃商户',
        dataIndex: 'supervisorActiveMerchantCount',
        tip: '活跃商户判断：最近7天日均交易金额≥10元',
        ellipsis: false,
      },
      {
        title: '主管流失商户',
        dataIndex: 'supervisorLossMerchantCount',
        tip: '流失商户判断：最近7天日均交易为0',
        width: 100,
        ellipsis: false,
      },
      {
        title: '交易金额',
        dataIndex: 'tradeAmtSum',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '交易笔数',
        dataIndex: 'tradeNumSum',
        ellipsis: true,
      },
      {
        title: '退款金额',
        dataIndex: 'refundAmtSum',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '退款笔数',
        dataIndex: 'refundNumSum',
        ellipsis: true,
      },
      {
        title: '实收金额',
        dataIndex: 'receivedAmtSum',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '代理商商户总数',
        dataIndex: 'agentAllMerchantCount',
        tip: '有效商户判断：进件审核通过的商户',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理商新增商户数',
        dataIndex: 'agentNewMerchantCount',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理交易商户',
        dataIndex: 'agentTradeMerchantCount',
        tip: '交易商户判断：支付成功的交易笔数大于等于1笔的商户',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理活跃商户',
        dataIndex: 'agentActiveMerchantCount',
        tip: '活跃商户判断：最近7天日均交易金额≥10元',
        width: 100,
        ellipsis: false,
      },
      {
        title: '代理流失商户',
        dataIndex: 'agentLossMerchantCount',
        tip: '流失商户判断：最近7天日均交易为0',
        width: 100,
        ellipsis: false,
      },
      {
        title: '业务员数量',
        dataIndex: 'exhibitionsCount',
        width: 100,
        ellipsis: false,
      },
      {
        title: '业务员代理商数',
        dataIndex: 'exhibitionAllAgentCount',
        width: 100,
        ellipsis: false,
      },
      {
        title: '业务员新增代理商数',
        dataIndex: 'exhibitionNewAgentCount',
        width: 100,
        ellipsis: false,
      },
      {
        title: '业务员商户数',
        dataIndex: 'exhibitionAllMerchantsCount',
        tip: '有效商户判断：进件审核通过的商户',
        width: 100,
        ellipsis: false,
      },
      {
        title: '业务员新增商户数',
        dataIndex: 'exhibitionNewMerchantsCount',
        width: 100,
        ellipsis: false,
      },
    ],
  })

  // ---------------------------- 查询数据表单和方法 ----------------------------

  const queryFormState = {
    agentType: 'exhibition',
    supervisorId: undefined,
    attributionDate: [dayjs().startOf('month').subtract(1, 'month'), dayjs().endOf('month').subtract(1, 'month')],
    attributionDateStart: dayjs().startOf('month').subtract(1, 'month').valueOf(),
    attributionDateEnd: dayjs().endOf('month').subtract(1, 'month').valueOf(),
    exhibitionsId: undefined,
    name: undefined,
    pageNo: 1,
    pageSize: 10,
  }

  const onChangeTime = (data) => {
    queryForm.value.attributionDateStart = data[0].startOf('days').valueOf()
    queryForm.value.attributionDateEnd = data[1].endOf('days').valueOf()
  }

  // 查询表单form
  const queryForm = ref({ ...queryFormState })
  // 表格加载loading
  const tableLoading = ref(false)
  // 表格数据
  const tableData = ref([])
  // 总数
  const total = ref(0)

  // 重置查询条件
  function resetQuery() {
    let pageSize = queryForm.value.pageSize
    Object.assign(queryForm.value, queryFormState)
    queryForm.value.pageSize = pageSize
    queryData()
  }

  // 搜索
  function onSearch() {
    queryForm.value.pageNo = 1
    queryData()
  }

  // 导出接口
  function exportFun() {
    apiObj.export(queryForm.value).then((res) => {
      let { fileBase64, fileName } = res.data
      downloadBase64File(fileBase64, fileName)
      message.success('导出成功')
    })
  }

  // 查询数据
  async function queryData() {
    tableLoading.value = true
    try {
      const payload = { ...queryForm.value }
      delete payload.fTime
      let queryResult = await apiObj.list(payload)
      tableData.value = queryResult.data
      total.value = queryResult.total
    } catch (e) {
      smartSentry.captureError(e)
    } finally {
      tableLoading.value = false
    }
  }

  onMounted(queryData)
</script>
